<!--父级页面:控制除了登录页以外所有页面共有的头部与左侧菜单栏-->
<template>
  <div style="display: flex;">
    <!-- 因为需要让左侧菜单栏和右侧主体部分横向排列，所以让两个div都设置float，此时父级div高度就无效了 -->
    <!-- 可以用overFlow:hidden 来解决。 另一种方式也可以解决：
    给父元素添加display：flex(弹性布局)(意思是所有子元素都采用左浮动，并且父元素设置了overFlow:hidden)
    也就是所有子元素采用左浮动后，且父元素会根据子元素浮动后的实际高度填充父元素的高度-->
    <!-- 左侧菜单栏-->
    <!-- 左侧菜单栏 可折叠折叠时宽度为64px不折叠时宽度为208px (通过一个变量来控制左侧菜单栏的宽度) -->
    <div :style="{width:(isCollapse ? '64px' : '208px')} ">
      <!-- 菜单栏 -->
      <el-menu
          background-color="#3C82F5"
          text-color="#fff"
          style="width: 100%; height:100vh;"
          active-text-color="#ff0"
          :collapse="isCollapse"
          :collapse-transition="false"
          router
          unique-opened
          @select="selectMenu">
        <!-- collapse-transition是折叠动画 -->
        <!-- router表示允许使用路由来点击菜单跳转页面(用跳转的目标页面跳转) -->

        <!--  后边把min-height去掉了，因为如果加了，主体内容部分如果内容多 高度太高，菜单就会跟随往上跑，最后隐藏起来了。所以将height设置固定值为100vh，而不是100% -->
        <!-- 具体原因： 设置100%的话，内容多高菜单就多高， 设置固定值100vh的话，则菜单就和视口一样高，永远在界面之内 -->
        <!--  min-height: 100vh最小高度是视口高度  height:100%表示菜单的高度(高度和内容一样高， 类似于最大高度)
        (作用： 可以让菜单栏高度随着页面内容变化而变化<页面内容多高菜单栏就多高>)-->
        <!-- collapse=isCollapse用来控制此菜单是否折叠 -->

        <!--  unique-opened: 表示只打开一个菜单项  -->
        <!--    -->
        <!--  用户管理子菜单 index="1"用来区分子菜单 -->
        <!--  因为在菜单中需要包含一个顶部的图标，但此内容又不在菜单项中，所以放在el-menu里，el-sub-menu外  -->
        <!--  左侧菜单栏上边的图标横条  -->
        <el-row style="padding-top: 10px"><!--  padding-top: 10px是让logo图片往下一点儿<不要太靠上了>  -->
          <el-col :span="2"></el-col>
          <el-col :span="7" style="padding-left: 7px">
            <el-avatar src="/imgs/admin/logo.png" style="width: 35px;height: 35px;"></el-avatar>
          </el-col>
          <el-col :span="isCollapse?0:13">
            <router-link to="/" style="color: white;text-decoration: none;font-weight: bold;position: relative;top:8px;left: 2px">智慧车辆</router-link>
          </el-col><!-- 让智慧车辆 四个字微调位置，用相对定位 -->
        </el-row>

        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size: 21px"><User/></el-icon>  <span>用户管理</span>   <!--  el-icon标签标识图标，User标签标识人头图标  -->
          </template>
          <!--  用户管理子菜单可以展开的菜单项： 用户列表 (index="/user"是index.js中配置的路由路径，作用是：点击用户列表菜单链接到/user路径对应的UserView.vue页面) -->
          <el-menu-item index="/user">用户列表</el-menu-item>
        </el-sub-menu>

        <!--  车辆管理子菜单 index="2"用来区分子菜单 -->
        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size: 21px"><Van/></el-icon>  <span>车辆管理</span>   <!--  el-icon标签标识图标，Van标签标识小车图标  -->
          </template>
          <!--  车辆管理子菜单可以展开的菜单项： 基本信息 -->
          <el-menu-item index="/vehicle">基本信息</el-menu-item>
        </el-sub-menu>

        <!--  调度管理子菜单 -->
        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size: 21px"><Place/></el-icon>  <span>调度管理</span>   <!--  el-icon标签标识图标，Place标签标识控制管理的图标  -->
          </template>
          <!--  调度管理子菜单可以展开的菜单项： 用户列表 -->
          <el-menu-item index="/application">申请列表</el-menu-item>
          <el-menu-item index="/audit">调度审核</el-menu-item>
          <el-menu-item index="/distribute">车辆分配</el-menu-item>
        </el-sub-menu>

        <!--  电子围栏子菜单-->
        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size: 21px"><Location/></el-icon>  <span>电子围栏</span>   <!--  el-icon标签标识图标，Location标签标识小车图标  -->
          </template>
          <!--  车辆管理子菜单可以展开的菜单项： 基本信息 -->
          <el-menu-item index="/geofence">围栏管理</el-menu-item>
        </el-sub-menu>

        <!--  数据字典子菜单-->
        <el-sub-menu index="5">
          <template #title>
            <el-icon style="font-size: 21px"><MessageBox/></el-icon>  <span>数据字典</span>   <!--  el-icon标签标识图标，MessageBox标签标识小车图标  -->
          </template>
          <!--  数据字典子菜单可以展开的菜单项： 字典管理 -->
          <el-menu-item index="/dict">字典管理</el-menu-item>
        </el-sub-menu>

      </el-menu>
    </div>


    <!-- 右侧主体内容 永远占满剩余宽度 -->
    <div :style="{width:(isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 208px)')}">
      <!-- 右侧顶部条(右侧主体部分的第一行) -->
      <el-header style="padding-top:22px;height:10vh;background-color:#fff;">
        <!--折叠图标与退出登录-->
        <el-row :gutter="10">
          <el-col :span="18">
            <el-icon style="font-size:20px;position:relative;left:-10px;" @click="changeCollapsed">
              <Expand/>  <!--  这个图标不是靠左的，但是tmooc视频上是靠左的(讲师下发的代码又不是靠左的)  -->
            </el-icon>
          </el-col>
          <el-col :span="6" style="position: relative;">
            <el-dropdown trigger="click" style="position:absolute;right:20px;">
              <span style="font-size:19px;font-weight: bold;">
                {{ user.username }}
                <el-icon><arrow-down/></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>


        <!-- 面包屑导航(右侧主体部分的第二行)  -->
        <!-- position:relative;top:20px;是让它相较于自己的位置往下挪20px  -->
        <el-breadcrumb separator="/" style="position:relative;top:20px;">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <!--  breadCrumb是用const breadCrumb= ref()定义的一个数组。在selectMenu()方法中还重新设置breadCrumb的具体值对应的数组了  -->
          <el-breadcrumb-item v-for="item in breadCrumb">{{item}}</el-breadcrumb-item>
        </el-breadcrumb>

      </el-header>

      <!-- 右侧除顶部条与面包屑的部分之外都是可变区域，在对应的子级页面里编写就行！(点击后会替换到router-view的位置) -->
      <!-- 右侧主体内容 除顶部条与面包屑的部分都是可变区域,在对应的子级页面里写!
      height:90vh;高度是固定的90vh overflow-y: auto;垂直方向溢出，如果超出视口的高度就会自动显示滚动条-->
      <el-main style="padding:0;height:90vh;overflow-y: auto;">
        <router-view/><!-- 这里有一个问题:如果el-main中的内容比较少 高度不够页面高度的话则 el-main部分的高度就有多少内容高度就是多少 -->
      </el-main> <!--  一般会强制让el-main和窗口一样高。 el-header的高度是height:10vh;  则el-main的高度应该是90vh  -->
    </div>


  </div>
  <!--  <router-view/>-->
</template>

<script setup>

import {ref} from  'vue';
//因为user需要和上边代码做关联，所以将user定义为一个响应式变量, user的值用main.js中的getUser方法获取来的
//所以用ref()
//const user= ref(window.getUser());
const user= ref(getUser());//用main.js中的getUser方法获取localStorage中存储的当前登录的用户信息
//调用getUser()方法并用ref()将返回值转化为响应式变量(在"退出登录" 上边显示用户名时用插值{{ user.username }}获取user的用户名)


//定义变量控制左侧菜单栏是否折叠
const isCollapse = ref(false);

//控制页面左侧是否折叠： 设置左侧el-menu所在的div的宽度 (折叠就变窄)   菜单上边的"智慧车辆"的router-link链接宽度为0或13
//最后设置右侧主体内容部分的宽度(折叠就宽)
//当前HomeView.vue主体框架的页面中显示的用户名需要作为全局值，所以需要在main.js中定义获取用户信息的全局方法
const changeCollapsed=  ()=>{
  isCollapse.value=!isCollapse.value;
};



//准备一个数组用来维护所有面包屑导航的值
let map= {//这个map的key是路由地址(在index.js中配置的路由路径)，value是面包屑导航显示的值
  "/user": ['用户管理','用户列表'],
  "/vehicle": ['车辆管理','基本信息'],
  "/geofence": ['电子围栏','围栏管理'],
  "/application": ['调度管理','申请列表'],
  "/audit": ['调度管理','调度审核'],
  "/distribute": ['调度管理','车辆分配'],
  "/dict": ['数据字典','字典管理']
};

//定义响应式变量来维护面包屑导航的值(默认为用户列表界面)，breadCrumb的具体值是一个数组(比如["用户管理","用户列表"])
//在selectMenu()方法中还重新设置breadCrumb的具体值对应的数组了
//如果第1次打开(刚刚登录成功需要进入到用户列表界面的时候),localStorage.getItem('breadcrumb')取不到值,则默认值为["用户管理","用户列表"]
//添加   localStorage.getItem('breadcrumb') || ['用户管理','用户列表']
//是为了让第一次打开页面时，让面包屑导航采用['用户管理','用户列表'] 的值(原本写的是const breadCrumb= ref() )
//  || ['用户管理','用户列表']  是为了在刷新页面时，不要显示上一次面包屑导航的值而采用['用户管理','用户列表']
// 具体意思是： 左边为false时采用右边的['用户管理','用户列表']

//如果不是第1次开打开,localStorage里有值,取到什么值,就显示什么值
//const breadCrumb= ref( );
const breadCrumb = ref(
    JSON.parse(localStorage.getItem('breadcrumb') || '["用户管理","用户列表"]')
);
// const breadCrumb= ref( localStorage.getItem('breadcrumb') || ['用户管理','用户列表']  );


//选择菜单项时触发,index表示选了哪一个菜单项(就是子菜单项的index的值)
//(选择菜单项时就会给localStorage中存入breadCrumb.value对应的数组。 然后上边的el-breadcrumb-item v-for就会取这个数组的值)
const selectMenu= (index)=>{
  //根据选择的菜单项设置面包屑导航的值，从上边map中根据key取value的值。
  //比如申请列表的index的值是 /application,  调度审核的index的值是 index="/audit"
  //加入index的值是/application, 则map[index]的值是['调度管理','申请列表']
  breadCrumb.value=map[index];  //就是给const breadCrumb=ref();变量赋值。
  //解决刷新页面,面包屑值丢失的问题的办法: 将breadCrumb.value存到localStorage中
  //这里必须要用JSON.stringify()将js对象breadCrumb.value转化为json字符串,否则不能存入到localStorage中
  //因为localStorage只支持存储字符串数据
  localStorage.setItem('breadcrumb', JSON.stringify(breadCrumb.value))
};

//退出登录的方法
const logout= ()=>{
  if(confirm('您确认要退出吗？')){
    //清除指定的值（登录用户和面包屑的信息）
    //( localStorage.clear()是清空localStorage中所有值)
    localStorage.removeItem('user');
    localStorage.removeItem('breadcrumb');
    //同时将user响应式变量的值设置为null(清空localStorage.中存储的登录信息后，user响应式变量的值和它相等，同时也要清空)
    user.value='';
    //退出登录后跳转到登录页面
    window.location.href='/login';
  }
};
</script>